<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息新增</title>
    <style rel="stylesheet">
        #maindiv {
            margin-top: 10px;
            width: 90%;
        }
    </style>
    <!--引入bootstrap的css文件-->
    <!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <!--引入jquery，注意：jquery要在js文件之前引入，因为bootstrap使用了jquery框架-->
    <script type="text/javascript"
            th:src="@{/jQuery-1.12.4/jquery-1.12.4.js}"></script>
    <!--引入bootstrap的js文件-->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
    <!--使用ajax将修改的数据进行显示-->
    <script type="text/javascript">
        // 使用ajax查询需要修改数据的信息
        // 使用jquery的dom ready事件，在页面加载完成之后就将数据进行查询
        $(function () {
            // 从浏览器缓存中将修改的数据取出
            var eachRow = sessionStorage.getItem("eachRow") || null;  // || null 相当于设置默认值为null
            // sessionStorage中缓存的是一个json的字符串形式，需要将字符串形式转换为json对象形式
            var eachBean = JSON.parse(eachRow);

            // 进行dom操作将需要修改的数据显示在修改页面的form表单中
            $("#userid").val(eachBean.userid); // 用于标识是新增还是修改
            $("#username").val(eachBean.username);
            $("#userpsw").val(eachBean.userpsw);
            $("#userage").val(eachBean.userage);
            $("#useraddress").val(eachBean.useraddress);
            $("#userregdate").val(eachBean.userregdate);
            //$("#userimg").val(eachBean.userimg); // 因为图片不能修改，因为没有上传的源文件；
            // 图片处理原则： 如果重新选择图片则覆盖之前的图片，如果不选择图片，则保留之前的图片

            // 修改数据显示完成之后，将sessionStorage中的缓存数据清除
            sessionStorage.removeItem("eachRow");

        });

        ///////////////////////////////////////////////////////////////////
        // 使用ajax保存form表单
        function saveMe() {
            console.info("saveMeeeeeeeeeeeeeeeeeeeeeee");
            // ajax进行文件上传
            //创建一个FormData对象：用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
            // ajax文件上传使用ForData作为数据载体发送后台请求
            var formData = new FormData($("#modifyform")[0]);
            console.log("formdataaaaaaaaaaaaaaaaaaaaaaaaaaa")
            console.log(formData);
            $.ajax({
                type: "POST", // 请求类型
                url: "saveOrUpdateUserinfoViaAjax", // 和form表单的 action属性一样
                //data: "name=John&location=Boston", // post的传参方式，可以使用jquery提供的 $("form").serialize() 方法进行处理
                data: formData,
                ////////////////////////////////////////////////////////
                contentType: false, //必须false才会自动加上正确的Content-Type,否则服务器无法识别
                /*
                    processData必须false才会避开jQuery对 formdata 的默认处理
                   XMLHttpRequest会对 formdata 进行正确的处理
                */
                processData: false,
                ///////////////////////////////////////////////////////
                // 指定服务器响应的数据类型  json html xml text
                dataType: "json",
                success: function (data) {
                    console.log("file upload ok!")
                    alert(data.msg);
                }
            });
        }
    </script>
</head>
<body>
<div id="maindiv">
    <form id="modifyform" class="form-horizontal" >
        <!--使用隐藏表单，保存主键字段；用于区分是新增还是修改-->
        <input type="hidden" class="form-control" id="userid" name="userid">

        <div class="form-group">
            <label class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入姓名">
            </div>

            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" id="userpsw" name="userpsw" placeholder="请输入密码">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userage" name="userage" placeholder="请输入年龄">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="useraddress" name="useraddress" placeholder="请输入地址">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-4">
                <input type="date" class="form-control" id="userregdate" name="userregdate" placeholder="请选择日期">
            </div>

            <label class="col-sm-2 control-label">头像</label>
            <div class="col-sm-4">
                <!--注意：file控件的anme属性，不要和实体类bean的属性字段一样，否则会直接把文件流赋值给该字段，造成数据类型转换错误-->
                <!--默认映射规则：那么属性采用 file_属性名  方式进行命名（属性名就是实体类的成员变量名）-->
                <input type="file" class="form-control" id="userimg" name="file_userimg" placeholder="请选择头像">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="hidden" id="btnSaveMe" onclick="saveMe()">
            </div>
        </div>
    </form>
</div>
</body>
</html>
